<template>
  <div class="dashboard-container">
    <!-- 顶部欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-left">
        <div class="user-avatar">
          <el-avatar v-if="userAvatar" :size="50" :src="userAvatar" />
          <div v-else class="default-avatar">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="50" height="50">
              <defs>
                <linearGradient id="avatarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
                  <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
                </linearGradient>
              </defs>
              <circle cx="512" cy="512" r="512" fill="url(#avatarGradient)"/>
              <path d="M512 512m-180 0a180 180 0 1 0 360 0 180 180 0 1 0-360 0Z" fill="#ffffff" opacity="0.9"/>
              <path d="M512 692c-98.4 0-188.2 40.3-251.5 107.5 75.9 67.2 174.7 107.5 286.7 107.5s210.8-40.3 286.7-107.5C770.6 732.3 680.8 692 512 692z" fill="#ffffff" opacity="0.9"/>
            </svg>
          </div>
        </div>
        <div class="welcome-info">
          <h2 class="welcome-title">{{ greeting }}，{{ username }}，保持专注，继续加油！</h2>
          <p class="welcome-subtitle">{{ authStore.userInfo.user?.deptName || '系统管理员' }} · 您的每一次决策，都将来源与安心。</p>
        </div>
      </div>
      <div class="welcome-right">
        <div class="time-info">
          <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
            <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="currentColor"/>
            <path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z" fill="currentColor"/>
          </svg>
          <span>{{ currentTime }}</span>
        </div>
      </div>
    </div>

    <!-- 统计卡片区域 -->
    <div class="stats-row">
      <div class="stat-card-simple" @click="navigateTo('/dataplatform/datasource')">
        <div class="stat-content">
          <div class="stat-main">
            <div class="stat-label">数据集成任务</div>
            <div class="stat-value">{{ dashboardStats?.dataSourceStats?.total || 0 }}</div>
            <div class="stat-trend">
              <span>周同比：</span>
              <span :class="getTrendClass(5.2)">
                5.2%
                <svg v-if="5.2 > 0" class="trend-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                  <path d="M500.8 461.909333L267.306667 695.402667c-6.826667 6.826667-15.36 10.24-25.6 10.24s-18.773333-3.413333-25.6-10.24c-13.653333-13.653333-13.653333-37.546667 0-51.2l256-256c13.653333-13.653333 37.546667-13.653333 51.2 0l256 256c13.653333 13.653333 13.653333 37.546667 0 51.2-6.826667 6.826667-15.36 10.24-25.6 10.24s-18.773333-3.413333-25.6-10.24L500.8 461.909333z" fill="currentColor"/>
                </svg>
                <svg v-else class="trend-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                  <path d="M500.8 604.8l233.493333-233.493333c6.826667-6.826667 15.36-10.24 25.6-10.24s18.773333 3.413333 25.6 10.24c13.653333 13.653333 13.653333 37.546667 0 51.2l-256 256c-13.653333 13.653333-37.546667 13.653333-51.2 0l-256-256c-13.653333-13.653333-13.653333-37.546667 0-51.2 6.826667-6.826667 15.36-10.24 25.6-10.24s18.773333 3.413333 25.6 10.24L500.8 604.8z" fill="currentColor"/>
                </svg>
              </span>
            </div>
          </div>
          <div class="stat-icon" style="background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
              <path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216c0 23.2 18.8 42 42 42h216v494z" fill="#ffffff"/>
            </svg>
          </div>
        </div>
      </div>
      
      <div class="stat-card-simple" @click="navigateTo('/dataplatform/project')">
        <div class="stat-content">
          <div class="stat-main">
            <div class="stat-label">数据开发任务</div>
            <div class="stat-value">{{ dashboardStats?.projectStats?.total || 0 }}</div>
            <div class="stat-trend">
              <span>周同比：</span>
              <span :class="getTrendClass(2)">
                2%
                <svg v-if="2 > 0" class="trend-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                  <path d="M500.8 461.909333L267.306667 695.402667c-6.826667 6.826667-15.36 10.24-25.6 10.24s-18.773333-3.413333-25.6-10.24c-13.653333-13.653333-13.653333-37.546667 0-51.2l256-256c13.653333-13.653333 37.546667-13.653333 51.2 0l256 256c13.653333 13.653333 13.653333 37.546667 0 51.2-6.826667 6.826667-15.36 10.24-25.6 10.24s-18.773333-3.413333-25.6-10.24L500.8 461.909333z" fill="currentColor"/>
                </svg>
                <svg v-else class="trend-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                  <path d="M500.8 604.8l233.493333-233.493333c6.826667-6.826667 15.36-10.24 25.6-10.24s18.773333 3.413333 25.6 10.24c13.653333 13.653333 13.653333 37.546667 0 51.2l-256 256c-13.653333 13.653333-37.546667 13.653333-51.2 0l-256-256c-13.653333-13.653333-13.653333-37.546667 0-51.2 6.826667-6.826667 15.36-10.24 25.6-10.24s18.773333 3.413333 25.6 10.24L500.8 604.8z" fill="currentColor"/>
                </svg>
              </span>
            </div>
          </div>
          <div class="stat-icon" style="background: linear-gradient(135deg, #36b9cc 0%, #258391 100%);">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
              <path d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM305.8 637.7c3.1 3.1 8.1 3.1 11.3 0l138.3-137.6L583 628.5c3.1 3.1 8.2 3.1 11.3 0l275.4-275.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6c-3.1-3.1-8.2-3.1-11.3 0l-230 229.9L461.4 404c-3.1-3.1-8.2-3.1-11.3 0L266.3 586.7c-3.1 3.1-3.1 8.2 0 11.3l39.5 39.7z" fill="#ffffff"/>
            </svg>
          </div>
        </div>
      </div>
      
      <div class="stat-card-simple" @click="navigateTo('/dataplatform/job')">
        <div class="stat-content">
          <div class="stat-main">
            <div class="stat-label">数据作业任务</div>
            <div class="stat-value">{{ dashboardStats?.jobStats?.total || 0 }}</div>
            <div class="stat-trend">
              <span>周同比：</span>
              <span :class="getTrendClass(9)">
                9%
                <svg v-if="9 > 0" class="trend-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                  <path d="M500.8 461.909333L267.306667 695.402667c-6.826667 6.826667-15.36 10.24-25.6 10.24s-18.773333-3.413333-25.6-10.24c-13.653333-13.653333-13.653333-37.546667 0-51.2l256-256c13.653333-13.653333 37.546667-13.653333 51.2 0l256 256c13.653333 13.653333 13.653333 37.546667 0 51.2-6.826667 6.826667-15.36 10.24-25.6 10.24s-18.773333-3.413333-25.6-10.24L500.8 461.909333z" fill="currentColor"/>
                </svg>
                <svg v-else class="trend-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                  <path d="M500.8 604.8l233.493333-233.493333c6.826667-6.826667 15.36-10.24 25.6-10.24s18.773333 3.413333 25.6 10.24c13.653333 13.653333 13.653333 37.546667 0 51.2l-256 256c-13.653333 13.653333-37.546667 13.653333-51.2 0l-256-256c-13.653333-13.653333-13.653333-37.546667 0-51.2 6.826667-6.826667 15.36-10.24 25.6-10.24s18.773333 3.413333 25.6 10.24L500.8 604.8z" fill="currentColor"/>
                </svg>
              </span>
            </div>
          </div>
          <div class="stat-icon" style="background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%);">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
              <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656zM492 400h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H492c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 144h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H492c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 144h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H492c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zM340 368a40 40 0 1 0 80 0 40 40 0 1 0-80 0zm0 144a40 40 0 1 0 80 0 40 40 0 1 0-80 0zm0 144a40 40 0 1 0 80 0 40 40 0 1 0-80 0z" fill="#ffffff"/>
            </svg>
          </div>
        </div>
      </div>
      
      <div class="stat-card-simple" @click="navigateTo('/dataplatform/asset')">
        <div class="stat-content">
          <div class="stat-main">
            <div class="stat-label">数据资产</div>
            <div class="stat-value">{{ dashboardStats?.assetStats?.total || 0 }}</div>
            <div class="stat-trend">
              <span>周同比：</span>
              <span :class="getTrendClass(10)">
                10%
                <svg v-if="10 > 0" class="trend-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                  <path d="M500.8 461.909333L267.306667 695.402667c-6.826667 6.826667-15.36 10.24-25.6 10.24s-18.773333-3.413333-25.6-10.24c-13.653333-13.653333-13.653333-37.546667 0-51.2l256-256c13.653333-13.653333 37.546667-13.653333 51.2 0l256 256c13.653333 13.653333 13.653333 37.546667 0 51.2-6.826667 6.826667-15.36 10.24-25.6 10.24s-18.773333-3.413333-25.6-10.24L500.8 461.909333z" fill="currentColor"/>
                </svg>
                <svg v-else class="trend-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                  <path d="M500.8 604.8l233.493333-233.493333c6.826667-6.826667 15.36-10.24 25.6-10.24s18.773333 3.413333 25.6 10.24c13.653333 13.653333 13.653333 37.546667 0 51.2l-256 256c-13.653333 13.653333-37.546667 13.653333-51.2 0l-256-256c-13.653333-13.653333-13.653333-37.546667 0-51.2 6.826667-6.826667 15.36-10.24 25.6-10.24s18.773333 3.413333 25.6 10.24L500.8 604.8z" fill="currentColor"/>
                </svg>
              </span>
            </div>
          </div>
          <div class="stat-icon" style="background: linear-gradient(135deg, #f6c23e 0%, #dda20a 100%);">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
              <path d="M868 160h-92v-40c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H320v-40c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40h-92c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM840 888H184V256h656v632z" fill="#ffffff"/>
              <path d="M484 580h56c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v276c0 4.4 3.6 8 8 8zm-88 0h56c4.4 0 8-3.6 8-8V424c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v148c0 4.4 3.6 8 8 8zm176 0h56c4.4 0 8-3.6 8-8V552c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v20c0 4.4 3.6 8 8 8zM304 580h56c4.4 0 8-3.6 8-8V552c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v20c0 4.4 3.6 8 8 8z" fill="#ffffff"/>
            </svg>
          </div>
        </div>
      </div>
      
      <div class="stat-card-simple" @click="navigateTo('/dataplatform/api')">
        <div class="stat-content">
          <div class="stat-main">
            <div class="stat-label">接口服务</div>
            <div class="stat-value">{{ dashboardStats?.apiStats?.total || 0 }}</div>
            <div class="stat-trend">
              <span>周同比：</span>
              <span :class="getTrendClass(10)">
                10%
                <svg class="trend-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="12" height="12">
                  <path d="M500.8 461.909333L267.306667 695.402667c-6.826667 6.826667-15.36 10.24-25.6 10.24s-18.773333-3.413333-25.6-10.24c-13.653333-13.653333-13.653333-37.546667 0-51.2l256-256c13.653333-13.653333 37.546667-13.653333 51.2 0l256 256c13.653333 13.653333 13.653333 37.546667 0 51.2-6.826667 6.826667-15.36 10.24-25.6 10.24s-18.773333-3.413333-25.6-10.24L500.8 461.909333z" fill="currentColor"/>
                </svg>
              </span>
            </div>
          </div>
          <div class="stat-icon" style="background: linear-gradient(135deg, #e74a3b 0%, #be2617 100%);">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
              <path d="M830.1 351.9c-19.3-20.4-47-32-75.9-31.9h-58.3V297c0-83.9-68.5-152-152.7-152s-152.7 68.1-152.7 152v23h-58.3c-28.9-0.1-56.6 11.5-75.9 31.9-19.5 20.4-30.2 48.1-29.7 76.5v371.3c-0.4 28.5 10.2 56.1 29.7 76.5 19.3 20.4 47 32 75.9 31.9h421.7c28.9 0.1 56.6-11.5 75.9-31.9 19.5-20.4 30.2-48.1 29.7-76.5V428.4c0.5-28.4-10.2-56.1-29.7-76.5zM459.5 297c0-27.6 22.4-50 50-50s50 22.4 50 50v23h-100v-23zm-71.7 484c-19.9 0-36-16.3-36-36.2 0-19.9 16.2-36.2 36-36.2s36 16.3 36 36.2c0 19.9-16.2 36.2-36 36.2zm72.3-164c-4.9 0-9.3-2-12.7-5.3-3.5-3.4-5.5-8-5.5-12.8v-70c0-9.9 8.1-18 18-18h.2c9.9 0 18 8.1 18 18v70c0 4.8-2 9.4-5.5 12.8-3.4 3.3-7.8 5.3-12.5 5.3zm93.1 164c-19.9 0-36-16.3-36-36.2 0-19.9 16.2-36.2 36-36.2s36 16.3 36 36.2c0 19.9-16.1 36.2-36 36.2zm0-164c-9.9 0-18-8.1-18-18v-70c0-9.9 8.1-18 18-18s18 8.1 18 18v70c0 9.9-8.1 18-18 18zm93.1 164c-19.9 0-36-16.3-36-36.2 0-19.9 16.2-36.2 36-36.2s36 16.3 36 36.2c0 19.9-16.2 36.2-36 36.2z" fill="#ffffff"/>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <div class="charts-row">
        <!-- API数据调用量变化趋势 -->
        <div class="chart-card-large">
          <div class="chart-header-simple">
            <h3>API数据调用量变化趋势</h3>
            <div class="chart-unit">单位：次</div>
            </div>
          <div class="chart-content-large">
            <div ref="apiCallsChart" class="chart-container-large"></div>
          </div>
        </div>
        
        <!-- 治理数据量变化趋势 -->
        <div class="chart-card-large">
          <div class="chart-header-simple">
            <h3>治理数据量变化趋势</h3>
            <div class="chart-legend">
              <span class="legend-item">
                <i class="legend-dot" style="background: #4e73df;"></i>
                数据归集
              </span>
              <span class="legend-item">
                <i class="legend-dot" style="background: #1cc88a;"></i>
                数据清洗
              </span>
              <span class="legend-item">
                <i class="legend-dot" style="background: #36b9cc;"></i>
                数据共享
              </span>
            </div>
            <div class="chart-unit">单位：万条</div>
          </div>
          <div class="chart-content-large">
            <div ref="governanceChart" class="chart-container-large"></div>
          </div>
        </div>
      </div>
            </div>
    
    <!-- 监控状态 -->
    <div class="monitor-section">
      <h3 class="section-title">
        <i class="title-icon"></i>
        监控状态
      </h3>
      <div class="monitor-grid">
        <div class="monitor-card" @click="navigateTo('/dataplatform/datasource')">
          <div class="monitor-icon" style="background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
              <path d="M832 64H192c-17.7 0-32 14.3-32 32v224c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 224H232V128h560v160zM832 416H192c-17.7 0-32 14.3-32 32v224c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32zm-40 224H232V480h560v160zM832 768H192c-17.7 0-32 14.3-32 32v128c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V800c0-17.7-14.3-32-32-32zm-40 128H232V832h560v64z" fill="#ffffff"/>
            </svg>
          </div>
          <div class="monitor-label">数据库</div>
        </div>
        
        <div class="monitor-card" @click="navigateTo('/dataplatform/batch')">
          <div class="monitor-icon" style="background: linear-gradient(135deg, #36b9cc 0%, #258391 100%);">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
              <path d="M917.7 148.8l-42.4-42.4c-1.6-1.6-3.6-2.3-5.7-2.3s-4.1.8-5.7 2.3l-76.1 76.1a199.27 199.27 0 0 0-112.1-34.3c-51.2 0-102.4 19.5-141.5 58.6L432.3 308.7a8.03 8.03 0 0 0 0 11.3L704 591.7c1.6 1.6 3.6 2.3 5.7 2.3 2 0 4.1-.8 5.7-2.3l101.9-101.9c68.9-69 77-175.7 24.3-253.5l76.1-76.1c3.1-3.2 3.1-8.3 0-11.4zM769.1 441.7l-59.4 59.4-186.8-186.8 59.4-59.4c24.9-24.9 58.1-38.7 93.4-38.7 35.3 0 68.4 13.7 93.4 38.7 24.9 24.9 38.7 58.1 38.7 93.4 0 35.3-13.8 68.4-38.7 93.4zm-190.2 105a8.03 8.03 0 0 0-11.3 0L501 613.3 410.7 523l66.7-66.7c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0l-66.7 66.7-90.3-90.3 66.7-66.7c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 0 0-11.3 0L218 330.6c-3.1 3.1-3.1 8.2 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l66.7-66.7 90.3 90.3-66.7 66.7c-3.1 3.1-3.1 8.2 0 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l66.7-66.7 90.3 90.3-66.7 66.7c-3.1 3.1-3.1 8.2 0 11.3l39.8 39.8c1.6 1.6 3.6 2.3 5.7 2.3 2 0 4.1-.8 5.7-2.3l66.7-66.7 90.3 90.3-66.7 66.7c-3.1 3.1-3.1 8.2 0 11.3l39.8 39.8c1.6 1.6 3.6 2.3 5.7 2.3 2 0 4.1-.8 5.7-2.3l66.7-66.7 39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l101.8-101.8c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8z" fill="#ffffff"/>
            </svg>
            </div>
          <div class="monitor-label">批量归集</div>
            </div>
        
        <div class="monitor-card" @click="navigateTo('/dataplatform/task')">
          <div class="monitor-icon" style="background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%);">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
              <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656zM492 400h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H492c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 144h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H492c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 144h184c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H492c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" fill="#ffffff"/>
            </svg>
          </div>
          <div class="monitor-label">任务维护</div>
        </div>
        
        <div class="monitor-card" @click="navigateTo('/dataplatform/realtime')">
          <div class="monitor-icon" style="background: linear-gradient(135deg, #f6c23e 0%, #dda20a 100%);">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#ffffff"/>
              <path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z" fill="#ffffff"/>
            </svg>
            </div>
          <div class="monitor-label">实时归集</div>
            </div>
        
        <div class="monitor-card" @click="navigateTo('/dataplatform/api-test')">
          <div class="monitor-icon" style="background: linear-gradient(135deg, #e74a3b 0%, #be2617 100%);">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
              <path d="M300 328a60 60 0 1 0 120 0 60 60 0 1 0-120 0zM852 64H172c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h680c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-32 824H204V128h616v760z" fill="#ffffff"/>
              <path d="M604 328h200c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H604c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 144h200c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H604c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 144h200c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H604c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 144h200c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H604c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z" fill="#ffffff"/>
            </svg>
          </div>
          <div class="monitor-label">api测试库</div>
    </div>

        <div class="monitor-card" @click="navigateTo('/dataplatform/development')">
          <div class="monitor-icon" style="background: linear-gradient(135deg, #858796 0%, #60616f 100%);">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
              <path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656zm-134.4-498.8c-3.2-3.1-8.4-3.1-11.6 0l-84 83.9-84-83.9c-3.2-3.1-8.4-3.1-11.6 0l-28.3 28.3c-3.2 3.1-3.2 8.2 0 11.4l84 83.8-84 83.9c-3.2 3.1-3.2 8.2 0 11.4l28.3 28.3c3.2 3.1 8.4 3.1 11.6 0l84-83.9 84 83.9c3.2 3.1 8.4 3.1 11.6 0l28.3-28.3c3.2-3.1 3.2-8.2 0-11.4l-84-83.9 84-83.8c3.2-3.2 3.2-8.3 0-11.4l-28.3-28.3z" fill="#ffffff"/>
            </svg>
          </div>
          <div class="monitor-label">数据开发</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
// 不再需要导入 Element Plus 图标
import { getDashboardStats, type DashboardStats } from '@/api/dataplatform/dashboard'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/store/modules/auth'

defineOptions({
  name: 'Home'
})

const router = useRouter()
const authStore = useAuthStore()
const dashboardStats = ref<DashboardStats>()
const currentTime = ref('')
const greeting = ref('')
let timeInterval: NodeJS.Timeout | null = null

// 从authStore获取用户信息
const username = computed(() => authStore.userInfo.user?.nickName || '用户')
const userAvatar = computed(() => authStore.userInfo.user?.avatar || '')

// 图表引用
const apiCallsChart = ref<HTMLElement>()
const governanceChart = ref<HTMLElement>()

// 导航到指定页面
const navigateTo = (path: string) => {
  router.push(path)
}

// 格式化存储大小
const formatStorage = (size: number): string => {
  if (size >= 1024) {
    return (size / 1024).toFixed(1) + 'TB'
  }
  return size.toFixed(1) + 'GB'
}

// 更新当前时间
const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  const weekDay = weekDays[now.getDay()]
  
  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds} ${weekDay}`
}

// 获取问候语
const getGreeting = () => {
  const hour = new Date().getHours()
  if (hour < 6) {
    greeting.value = '凌晨好'
  } else if (hour < 9) {
    greeting.value = '早上好'
  } else if (hour < 12) {
    greeting.value = '上午好'
  } else if (hour < 14) {
    greeting.value = '中午好'
  } else if (hour < 18) {
    greeting.value = '下午好'
  } else if (hour < 22) {
    greeting.value = '晚上好'
  } else {
    greeting.value = '夜深了'
  }
}

// 获取数据源在线率
const getOnlineRate = () => {
  const stats = dashboardStats.value?.dataSourceStats
  if (!stats || stats.total === 0) return 0
  return Number(((stats.online / stats.total) * 100).toFixed(1))
}

// 获取作业成功率
const getJobSuccessRate = () => {
  const stats = dashboardStats.value?.jobStats
  if (!stats) return 0
  const total = stats.success + stats.failed
  if (total === 0) return 0
  return Number(((stats.success / total) * 100).toFixed(1))
}

// 获取趋势样式类
const getTrendClass = (value: number) => {
  return value >= 0 ? 'trend-up' : 'trend-down'
}

// 获取统计数据
const fetchDashboardStats = async () => {
  try {
    const { data } = await getDashboardStats()
    dashboardStats.value = data
    await nextTick()
    initCharts()
  } catch (error) {
    console.error('获取统计数据失败:', error)
    ElMessage.error('获取统计数据失败')
  }
}

// 初始化图表
const initCharts = () => {
  initApiCallsChart()
  initGovernanceChart()
}

// API调用量图表 - 柱状图
const initApiCallsChart = () => {
  if (!apiCallsChart.value) return
  
  const chart = echarts.init(apiCallsChart.value)
  
  // 模拟7天的数据
  const days = ['04.01', '04.02', '04.03', '04.04', '04.05', '04.06', '04.07']
  const callsData = [750, 550, 720, 450, 750, 700, 580]
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '3%',
      containLabel: true
    },
    xAxis: {
        type: 'category',
      data: days,
      axisLine: {
        lineStyle: {
          color: '#e0e0e0'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisLabel: {
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        data: callsData,
        type: 'bar',
        barWidth: '35%',
        itemStyle: {
          color: '#4e73df',
          borderRadius: [4, 4, 0, 0]
        },
        emphasis: {
          itemStyle: {
            color: '#2e59d9'
          }
        }
      }
    ]
  }
  
  chart.setOption(option)
  window.addEventListener('resize', () => chart.resize())
}

// 治理数据量图表 - 折线图
const initGovernanceChart = () => {
  if (!governanceChart.value) return
  
  const chart = echarts.init(governanceChart.value)
  
  // 模拟7天的数据
  const days = ['04.01', '04.02', '04.03', '04.04', '04.05', '04.06', '04.07']
  const collectionData = [250, 120, 750, 100, 50, 220, 250]  // 数据归集
  const cleanData = [100, 50, 100, 700, 100, 50, 100]  // 数据清洗  
  const shareData = [100, 50, 100, 50, 750, 200, 250]  // 数据共享
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '3%',
      containLabel: true
    },
    xAxis: {
        type: 'category',
      boundaryGap: false,
      data: days,
      axisLine: {
        lineStyle: {
          color: '#e0e0e0'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12
      }
    },
    yAxis: {
        type: 'value',
      axisLine: {
        show: false
      },
        axisLabel: {
        color: '#666'
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '数据归集',
        type: 'line',
        smooth: true,
        data: collectionData,
        itemStyle: {
          color: '#4e73df'
        },
        lineStyle: {
          width: 2,
          color: '#4e73df'
        },
        symbol: 'circle',
        symbolSize: 8
      },
      {
        name: '数据清洗',
        type: 'line',
        smooth: true,
        data: cleanData,
        itemStyle: {
          color: '#1cc88a'
        },
        lineStyle: {
          width: 2,
          color: '#1cc88a'
        },
        symbol: 'circle',
        symbolSize: 8
      },
      {
        name: '数据共享',
        type: 'line',
        smooth: true,
        data: shareData,
        itemStyle: {
          color: '#36b9cc'
        },
        lineStyle: {
          width: 2,
          color: '#36b9cc'
        },
        symbol: 'circle',
        symbolSize: 8
      }
    ]
  }
  
  chart.setOption(option)
  window.addEventListener('resize', () => chart.resize())
}

onMounted(() => {
  // 初始化时间和问候语
  updateTime()
  getGreeting()
  
  // 每秒更新时间
  timeInterval = setInterval(updateTime, 1000)
  
  // 获取统计数据
  fetchDashboardStats()
  
  // 每30秒刷新一次数据
  setInterval(() => {
    fetchDashboardStats()
  }, 30000)
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 20px;
  background: #f0f2f5;
  min-height: 100vh;
}

// SVG图标通用样式
.icon {
  display: inline-block;
  vertical-align: middle;
}

.trend-icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 2px;
}

// 顶部欢迎区域
.welcome-section {
  background: #ffffff;
  padding: 20px 30px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e8e8e8;
  
  .welcome-left {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .user-avatar {
      .el-avatar {
        border: 2px solid #f0f2f5;
      }
      
      .default-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid #f0f2f5;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        
        svg {
          display: block;
        }
      }
    }
    
    .welcome-info {
      .welcome-title {
        font-size: 18px;
    font-weight: 600;
        color: #333;
        margin: 0 0 6px 0;
        line-height: 1.4;
      }
      
      .welcome-subtitle {
        font-size: 13px;
        color: #999;
        margin: 0;
      }
    }
  }
  
  .welcome-right {
    .time-info {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      color: #666;
      
      svg {
        flex-shrink: 0;
      }
    }
  }
}

// 统计卡片行
.stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

// 简化统计卡片
.stat-card-simple {
  background: #ffffff;
  padding: 18px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
  
  &:nth-child(1) {
    border-left-color: #4e73df;
  }
  
  &:nth-child(2) {
    border-left-color: #36b9cc;
  }
  
  &:nth-child(3) {
    border-left-color: #1cc88a;
  }
  
  &:nth-child(4) {
    border-left-color: #f6c23e;
  }
  
  &:nth-child(5) {
    border-left-color: #e74a3b;
  }
  
  .stat-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .stat-main {
      flex: 1;
      
      .stat-label {
        font-size: 13px;
        color: #666;
        margin-bottom: 8px;
      }
      
      .stat-value {
        font-size: 32px;
        font-weight: 700;
        color: #333;
        line-height: 1;
        margin-bottom: 8px;
      }
      
      .stat-trend {
        font-size: 12px;
        color: #999;
        
        .trend-up {
          color: #f56c6c;
          display: inline-flex;
          align-items: center;
          gap: 2px;
        }
        
        .trend-down {
          color: #67c23a;
          display: inline-flex;
          align-items: center;
          gap: 2px;
        }
      }
    }
    
    .stat-icon {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #ffffff;
      flex-shrink: 0;
      
      svg {
        display: block;
      }
    }
  }
}

// 图表区域
.charts-section {
  margin-bottom: 20px;
}

.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.chart-card-large {
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  
  .chart-header-simple {
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 600;
      color: #333;
    }
    
    .chart-unit {
      font-size: 13px;
      color: #999;
    }
    
    .chart-legend {
      display: flex;
      gap: 20px;
      margin-right: auto;
      padding-left: 30px;
      
      .legend-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: #666;
        
        .legend-dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          display: inline-block;
        }
      }
    }
  }
  
  .chart-content-large {
    padding: 16px 20px;
    
    .chart-container-large {
      width: 100%;
      height: 350px;
    }
  }
}

// 监控状态
.monitor-section {
  background: #ffffff;
  padding: 20px;
  border-radius: 4px;
  
  .section-title {
    margin: 0 0 20px 0;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    
    .title-icon {
      width: 4px;
      height: 16px;
      background: #4e73df;
      border-radius: 2px;
      display: inline-block;
    }
  }
  
  .monitor-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    
    .monitor-card {
    display: flex;
      flex-direction: column;
      align-items: center;
    gap: 12px;
      padding: 20px;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: #fafbfc;
      
      &:hover {
        background: #f0f2f5;
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        
        .monitor-icon {
          transform: scale(1.1);
        }
      }
      
      .monitor-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        color: #ffffff;
        transition: all 0.3s ease;
        
        svg {
          display: block;
        }
      }
      
      .monitor-label {
        font-size: 14px;
        color: #666;
        font-weight: 500;
      }
    }
  }
}

// 响应式
@media (max-width: 1400px) {
  .stats-row {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .monitor-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 1024px) {
  .charts-row {
    grid-template-columns: 1fr;
  }
  
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .monitor-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .dashboard-container {
    padding: 12px;
  }
  
  .welcome-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    
    .welcome-right {
      width: 100%;
    }
  }
  
  .stats-row {
    grid-template-columns: 1fr;
  }
  
  .monitor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
</style>
